<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href="./css/font-awesome.min.css"/>
    <link rel="stylesheet" href="./css/swal.css">
    <script src="./js/swal.js"></script>
    <style>
        @media only screen and (max-width: 600px) {
            /* Adjust styles for small screens */

            .container {
                max-width: 100%;
                padding: 10px; /* Adjust padding for smaller screens */
            }

            .title {
                font-size: 24px; /* Adjust title font size for smaller screens */
            }

            .question, .question2 {
                padding: 10px; /* Adjust padding for question containers */
            }

            .question2 button, .btn button {
                font-size: 14px; /* Adjust button font size for smaller screens */
                padding: 8px; /* Adjust button padding for smaller screens */
            }

            .bottom-nav a {
                padding: 10px; /* Adjust padding for bottom navigation links */
                font-size: 14px; /* Adjust font size for bottom navigation links */
            }
        }

        body {
            /*background-color: #ffdb58; !* Chinese New Year theme color *!*/
            background-color: #f5f5f5; /* Light Gray */
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration-line: none;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            font-family: "Microsoft YaHei", Arial, sans-serif; /* Chinese New Year theme font */
            background-color: #fff; /* White background for content */
            border-radius: 10px;
            padding: 20px;
        }

        .title {
            font-size: 36px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
            color: #c71585; /* Deep pink color */
        }

        .question2 {
            list-style: none;
            padding: 15px;
            /*border: 2px solid #c71585; !* Deep pink color *!*/
            border-radius: 10px;
            margin-bottom: 20px;
            background-color: #fff; /* White background for questions */
            display: flex; /* Adjusted to flex container for button alignment */
            align-items: center;
            justify-content: right; /* Ensures items are spaced apart */
        }

        .question {
            list-style: none;
            padding: 15px;
            border: 2px solid #c71585; /* Deep pink color */
            border-radius: 10px;
            margin-bottom: 20px;
            background-color: #fff; /* White background for questions */
        }

        .question2 li, .question li {
            margin: 10px;
        }

        .question2 button {
            font-size: 18px;
            padding: 10px;
            background-color: #c71585; /* Deep pink color */
            color: #fff; /* White color for text */
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .favorite {
            background-color: #ffd700; /* Gold color for favorite button */
        }

        /*.favorite:hover {*/
        /*    background-color: #ffcc00; !* Darker gold color on hover *!*/
        /*}*/

        .fa-star {
            margin-right: 5px;
            color: #ffd700; /* Gold color for star icon */
        }

        .btn {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn button {
            margin: 15px 10px;
            font-size: 18px;
            padding: 10px;
            background-color: #c71585; /* Deep pink color */
            color: #fff; /* White color for text */
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .result {
            font-size: 24px;
            color: #32cd32; /* Lime green color for correct answer */
            text-align: center;
            margin-bottom: 10px;
        }

        .answer {
            font-size: 20px;
            color: #0000cd; /* Medium blue color for answer text */
            text-align: center;
            margin-bottom: 20px;
        }

        .bottom-nav {
            background-color: #333;
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .bottom-nav a {
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 0;
            font-size: 17px;
            flex: 1;
        }
        .bottom-nav i {
            margin-right: 4px;
        }

        .bottom-nav a:hover {
            background-color: #ddd;
            color: black;
        }

        .bottom-nav a.active {
            background-color: #4caf50; /* Green color */
            color: white;
        }
    </style>

</head>
<body>
<div class="container">
    <div class="title">Prueba de Conhecimento de Ano Novo</div>
    <ul class="question" id="question">
        <!-- The question and options will be generated by JS -->
    </ul>
    <ul class="question2" id="question2">
        <!-- The question and options will be generated by JS -->
        <!-- Add a favorite button -->
        <li>
            <button onclick="toggleFavorite()" id="favoriteButton" class="favorite fa fa-star">
                coleção
            </button>
        </li>
    </ul>
    <div class="btn">
        <button type="button" id="submit">Enviar respostas</button>
        <button type="button" id="next">A próxima pergunta</button>
    </div>
    <div class="result" id="result">
        <!-- The result will be shown by JS -->
    </div>
    <div class="answer" id="answer">
        <!-- The correct answer will be shown by JS -->
    </div>
</div>
<div class="bottom-nav">
    <a href="index.html" onclick="setActiveNav(this)"><i class="fa fa-home"></i>página inicial</a>
    <a href="question.html" class="active" onclick="setActiveNav(this)"><i class="fa fa-align-justify"></i>teste</a>
    <a href="mine.html" onclick="setActiveNav(this)"><i class="fa fa-user"></i>Centro Pessoal</a>
</div>

<script>
    window.onload = function () {
        var q = questions[index];
        var favoriteButton = document.getElementById("favoriteButton");

        if (q.favorite) {
            favoriteButton.innerText = "Cancelar o Favorito";
            favoriteButton.classList.add('favorite'); // Add the 'favorite' class to change color
            favoriteButton.style.backgroundColor = "#ffd700";

        } else {
            favoriteButton.innerText = "coleção";
            favoriteButton.classList.remove('favorite'); // Remove the 'favorite' class
            favoriteButton.style.backgroundColor = "#c71585";
        }
    }

    // Add a favorite button
    function toggleFavorite() {
        // Get the current question object
        var q = questions[index];
        // Toggle the favorite status
        q.favorite = !q.favorite;

        // Update the local storage with the current questions array
        localStorage.setItem('questions', JSON.stringify(questions));

        // Get the favorite button element
        var favoriteButton = document.getElementById("favoriteButton");

        // Check the current favorite status and update the button accordingly
        if (q.favorite) {
            Swal.fire({
                title: 'rápido',
                text: 'Coleção bem sucedida！',
                icon: 'success',
                confirmButtonText: 'OK'
            });
            favoriteButton.innerText = "Cancelar o Favorito";
            favoriteButton.classList.add('favorite'); // Add the 'favorite' class to change color
            // alert("Coleção bem sucedida！");
        } else {
            Swal.fire({
                title: 'rápido',
                text: 'Cancelar o Favorito！',
                icon: 'success',
                confirmButtonText: 'OK'
            });
            favoriteButton.innerText = "coleção";
            favoriteButton.classList.remove('favorite'); // Remove the 'favorite' class
            // alert("Cancelar o Favorito！");
        }
        favoriteButton.style.backgroundColor = q.favorite ? "#ffd700" : "#c71585";
    }


    // JavaScript 函数，用于切换按钮的活动状态
    function setActive(element) {
        // 移除所有按钮的活动状态
        var buttons = document.querySelectorAll('.button');
        buttons.forEach(function (button) {
            button.classList.remove('active');
        });

        // 添加当前点击按钮的活动状态
        element.classList.add('active');
    }

    // JavaScript 函数，用于切换底部导航按钮的活动状态
    function setActiveNav(element) {
        // 移除所有导航按钮的活动状态
        var navButtons = document.querySelectorAll('.bottom-nav a');
        navButtons.forEach(function (navButton) {
            navButton.classList.remove('active');
        });

        // 添加当前点击导航按钮的活动状态
        element.classList.add('active');
    }
</script>
</body>
<script>

    // The question bank
    var questions = [
        {
            type: "single",
            question: "O Festival da Primavera é um festival tradicional chinês, geralmente celebrado nesse mês?",
            options: [
                "No primeiro dia do primeiro mês lunar",
                "15 de maio",
                "1 de outubro",
                "23 de dezembro"
            ],
            answer: "A"
        },
        {
            type: "single",
            question: "Qual é a comida tradicional para o Festival da Primavera?",
            options: [
                "embalagem",
                "arroz",
                "sushi",
                "noodle"
            ],
            answer: "A"
        },
        {
            type: "single",
            question: "Onde as performances tradicionais de lanterna durante o Festival da Primavera geralmente ocorrem?",
            options: [
                "Xangai",
                "Pequim",
                "Chengdu",
                "Guangzhouchina. kgm"
            ],
            answer: "C"
        },
        {
            type: "single",
            question: "Durante o Festival da Primavera, que cor de casais e casais as pessoas gostam de pegar?",
            options: [
                "vermelho",
                "azul",
                "amarelo",
                "verde"
            ],
            answer: "A"
        },
        {
            type: "single",
            question: "Que maneira tradicional os chineses visitam normalmente durante o Festival da Primavera?",
            options: [
                "Visitando parentes e amigos",
                "Enviar cartões eletrônicos de saudação",
                "Escreva uma carta de bênçãos",
                "Trocar presentes"
            ],
            answer: "A"
        },
        {
            type: "single",
            question: "Qual lenda originou a dança dos dragões e leões no Festival da Primavera?",
            options: [
                "Serpente Branca",
                "Três Golpes Brancos",
                "Meng Jiangnu e a Grande Muralha",
                "Guanyin do Mar da China do Sul"
            ],
            answer: "B"
        },
        {
            type: "single",
            question: "Durante o Festival da Primavera, que forma de comida as pessoas gostam de fazer, simbolizando a reunião?",
            options: [
                "Arquivamento de arroz redondo",
                "Noodles de Longevity",
                "Torto de arroz quadrado",
                "Dumplings coloridos"
            ],
            answer: "A"
        },
        {
            type: "single",
            question: "Qual é uma atividade tradicional em que cada família se envolverá durante o Festival da Primavera?",
            options: [
                "Desligar fogos de artifício e bombardeiros",
                "Limpar",
                "Queimando incenso para adorar ancestrais",
                "Sair da família"
            ],
            answer: "B"
        },
        {
            type: "single",
            question: "Durante o Festival da Primavera, que tipo de palavras de bendição dizem as pessoas normalmente durante os saudações do Ano Novo chinês?",
            options: [
                "feliz novo ano",
                "Saúde física",
                "Parabéns por ter feito uma fortuna",
                "Achar sucesso acadêmico"
            ],
            answer: "C"
        },
        {
            type: "single",
            question: "Que tipo de atividades de celebração as pessoas realizam na véspera do Ano Novo durante o tradicional Festival da Primavera para proteger os espíritos malvados?",
            options: [
                "Dança de leões",
                "lançaram fogos de artifício",
                "permanecem acordados tarde na noite do novo ano",
                "Comer arroz de arroz"
            ],
            answer: "C"
        }
    ];

    // The current question index
    var index = 0;

    // The function to display the question and options
    function displayQuestion() {
        // 获取问题元素
        var question = document.getElementById("question");
        // Clear the previous content
        question.innerHTML = "";
        // Get the current question object
        var q = questions[index];
        // Create a list item for the question text
        var li = document.createElement("li");
        li.innerText = q.question;
        // Append the list item to the question element
        question.appendChild(li);
        // Loop through the options array
        for (var i = 0; i < q.options.length; i++) {
            // Create a list item for each option
            var li = document.createElement("li");
            // Create an input element for the option
            var input = document.createElement("input");
            // Set the input type according to the question type
            input.type = q.type === "single" ? "radio" : "checkbox";
            // Set the input name according to the question index
            input.name = index;
            // Set the input value according to the option index
            input.value = i;
            // Set the input id according to the option index
            input.id = index + "-" + i;
            // Append the input element to the list item
            li.appendChild(input);
            // Create a label element for the option
            var label = document.createElement("label");
            // Set the label text according to the option text
            label.innerText = q.options[i];
            // Set the label for attribute according to the input id
            label.htmlFor = index + "-" + i;
            // Append the label element to the list item
            li.appendChild(label);
            // Append the list item to the question element
            question.appendChild(li);
        }
    }

    // The function to check the answer and show the result
    function checkAnswer() {
        // Get the result element
        var result = document.getElementById("result");
        // Get the answer element
        var answer = document.getElementById("answer");
        // Get the current question object
        var q = questions[index];
        // Get the selected options
        var selected = document.querySelectorAll("input[name='" + index + "']:checked");
        if (selected.length === 0) {
            Swal.fire({
                title: 'rápido',
                text: 'Selecione uma resposta antes de enviar！',
                icon: 'error',
                confirmButtonText: 'OK'
            });
            // alert("Please select an answer before submitting.");
            return;
        }
        // Initialize a flag to indicate if the answer is correct
        var correct = true;
        // Loop through the selected options
        for (var i = 0; i < selected.length; i++) {
            // Get the option index
            var option = selected[i].value;
            // Get the option label
            var label = selected[i].nextSibling;
            // Convert the answer index from A to 0, B to 1, etc.
            var answerIndex = q.answer.charCodeAt(0) - 65;
            // If the option index is not equal to the answer index, the answer is wrong
            if (option != answerIndex) {
                // Set the flag to false
                correct = false;
                // Set the label color to red
                label.style.color = "red";
            } else {
                // Set the label color to green
                label.style.color = "blue";
            }
        }
        // If the answer is correct, show the result
        if (correct) {
            result.innerText = "Correct!";
        } else {
            result.innerText = "Wrong!";
        }
        // 显示正确答案
        answer.innerText = "A resposta correta é：" + q.answer + " - " + q.options[q.answer.charCodeAt(0) - 65];
    }

    // The function to go to the next question
    function nextQuestion() {
        var favoriteButton = document.getElementById("favoriteButton");
        favoriteButton.innerText = "coleção";
        favoriteButton.classList.remove('favorite'); // Remove the 'favorite' class
        favoriteButton.style.backgroundColor = "#c71585";
        // Increment the question index
        index++;
        // If the index is less than the question length, display the next question
        if (index < questions.length) {
            displayQuestion();
        } else {
            // Otherwise, alert the end of the quiz
            Swal.fire({
                title: 'rápido',
                text: 'Você já concluiu o teste！',
                icon: 'error',
                confirmButtonText: 'OK'
            });
            // alert("Você já concluiu o teste！");
        }
        // Clear the result and answer elements
        document.getElementById("result").innerText = "";
        document.getElementById("answer").innerText = "";
    }

    // Display the first question when the page loads
    displayQuestion();

    // Add a click event listener to the submit button
    document.getElementById("submit").addEventListener("click", checkAnswer);

    // Add a click event listener to the next button
    document.getElementById("next").addEventListener("click", nextQuestion);
</script>